<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>订单属性设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="order-property-setting">
      <search-btn-view btn-text="查询" :before-search="checkSearchValid" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="saveOrderSetting">设置属性</el-button>
        </template>
        <div slot="search-content">
          <sys-common-search ref="propertySettingSearch" :search="search" request-url="companyMaterial/getAllOrderSearchWhere"
            :search-field="searchFields" label-width="100px" input-width="180px">
            <template slot="append">
              <el-form-item label="订单序号">
                <el-input-number v-model="search.lineNo" :after-change-format-value="formatLineValue" :min="-1"
                  :precision="0" :controls="false" style="width:180px;">
                </el-input-number>
              </el-form-item>
              <el-form-item label="仓位">
                <el-select style="width:180px;" v-model="search.materialFactory" clearable>
                  <el-option v-for="(warehouse,index) in warehouseList" :key="`warehouse_${index}`" :value="warehouse.value"
                    :label="warehouse.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物料类型">
                <el-select style="width:180px;" v-model="search.materialType" clearable>
                  <el-option v-for="(materialType,index) in materialTypeList" :key="`materialType_${index}`" :value="materialType">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </sys-common-search>
        </div>
      </search-btn-view>
      <div class="property-setting-table-div">
        <el-table fit stripe border class="property-setting-table" :data="orderSettingList" style="width: 100%" height="parent" @select-all="selectRow" @select="selectRow">
          <el-table-column :resizable="false" type="selection" width="25px" fixed></el-table-column>
          <el-table-column auto-width label="订单编号" prop="orderNo" key="orderNo" column-key="orderNo" min-width="70px">
          </el-table-column>
          <el-table-column :resizable="false" label="订单序号" prop="lineNo" width="75px" key="lineNo" column-key="lineNo">
          </el-table-column>
          <el-table-column :resizable="false" label="仓位" min-width="90px" key="materialFactory" column-key="materialFactory">
            <template slot-scope="scope">
              <span>{{warehouseList[scope.row.materialFactory-1].label}}</span>
            </template>
          </el-table-column>
          <el-table-column auto-width :resizable="false" label="物料类型" prop="materialType" min-width="70px" key="materialType" column-key="materialType">
          </el-table-column>
          <el-table-column auto-width :resizable="false" label="编号" prop="color" min-width="70px" key="color" column-key="color">
          </el-table-column>
          <el-table-column auto-width :resizable="false" label="描述" prop="colorDescription" min-width="70px" key="colorDescription" column-key="colorDescription">
          </el-table-column>
          <el-table-column :resizable="false" label="工艺" width="220px" key="arts" column-key="arts">
            <template slot-scope="scope">
              <el-select filterable clearable v-model="scope.row.arts" placeholder="请选择工艺" style="width:210px" size="small">
                <el-option v-for="(technology,index) in scope.row.technologyList" :key="`technology_${index}`" :value="technology"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</body>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/js/dropdownUtil.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js"
  ]);
</script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        orderId: '',
        companyOrderId: '',
        coustomId: '',
        customerOrderId: '',
        factoryId:'',
        lineNo: undefined,
        materialFactory: '',
        materialType: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        searchFields: ['orderId', 'companyOrderId', 'coustomId', 'coustomOrderId','factoryId'],
        orderSettingList: [],
        materialTypeList: [],
        technologyMaterial: {},
        selectIds:[],
        warehouseList: [{
          value: '1',
          label: "原材料仓"
        }, {
          value: '2',
          label: "辅料仓"
        }, {
          value: '3',
          label: '信息备注仓'
        }]
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setMaterialTypeList(),
        this.setTechnologyMaterial()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setMaterialTypeList: function () {
        var self = this;
        return DropdownUtil.getPublicMaterialTypeList().then(function (materialTypeList) {
          self.materialTypeList = materialTypeList;
          return materialTypeList;
        });
      },

      setTechnologyMaterial: function () {
        var self = this;
        ajaxRequest('materialTypeTechnology/getCompanyMaterialTechnology', {
          status: 0
        }).then(function (res) {
          var technologyList = res.returnData;
          var technologyGroup = _.groupBy(technologyList, 'materialType');
          var technologyMaterial = {};
          for (var materialType in technologyGroup) {
            var technologyNames = technologyGroup[materialType];
            technologyNames = _.map(technologyNames, 'technology');
            technologyMaterial[materialType] = technologyNames;
          }
          self.technologyMaterial = technologyMaterial;
        });
      },

      setOrderSettingList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var orderIds = this.$refs.propertySettingSearch.getFieldFilterData('orderId');
        if (orderIds.length > 1) {
          return;
        }
        var orderId = orderIds[0];
        var search = this.search;

        var postData = {
          orderNo:orderId,
          materialFactory:search.materialFactory,
          materialType:search.materialType
        };

        var lineNo = search.lineNo;
        if (lineNo !== undefined) {
          postData.lineNo = lineNo;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('materialTypeTechnology/getOrderDatailFromExtend',postData).then(function(orderSettingList){
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          for (var i = 0; i < orderSettingList.length; i++) {
            var orderSetting = orderSettingList[i];
            orderSetting.id = SysUtil.getId();
            var technologyList = self.getTechnologyList(orderSetting);
            orderSetting.technologyList = technologyList;
          }

          self.selectIds = [];
          self.orderSettingList = orderSettingList;
          self.loading = false;
        }).catch(function(){
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.setOrderSettingList(true);
      },

      selectRow:function(selection){
        var selectIds = _.map(selection,'id');
        this.selectIds = selectIds;
      },

      saveOrderSetting:function(){
        var selectIds = this.selectIds;
        if (selectIds.length === 0) {
          this.$alert('请选择需要设置属性的订单','信息');
          return;
        }
        var orderSettingList = this.orderSettingList;
        var saveSettingList = [];
        for (var i = 0; i < orderSettingList.length; i++) {
          var orderSetting = orderSettingList[i];
          if (selectIds.indexOf(orderSetting.id) === -1) {
            continue;
          }
          saveSettingList.push({
            orderNo:orderSetting.orderNo,
            lineNo:orderSetting.lineNo,
            materialFactory:orderSetting.materialFactory,
            materialType:orderSetting.materialType,
            arts:orderSetting.arts
          });
        }

        this.loading = true;
        var self = this;
        ajaxRequest('materialTypeTechnology/setOrderDatailExtendDetail',{
          jsonArray:JSON.stringify(saveSettingList)
        }).then(function(res){
          self.$alert('订单属性设置成功','信息',{
            callback:function(){
              self.setOrderSettingList();
            }
          });
          self.loading = false;
        }).catch(function(){
          self.loading = false;
        });
      },

      checkSearchValid: function () {
        var orderIds = this.$refs.propertySettingSearch.getFieldFilterData('orderId');
        if (orderIds.length > 1) {
          this.$alert('该条件下不能确定唯一订单，请重新设置查询条件','信息');
          return false;
        }
        return true;
      },

      formatLineValue: function (value, type) {
        if (value === 0) {
          if (type === 'input') {
            return false;
          }
        }
        return true;
      },

      getTechnologyList:function(orderSetting){
        var materialType = orderSetting.materialType;
        var technologyMaterial = this.technologyMaterial;
        var technologyList = technologyMaterial[materialType];

        if (technologyList === undefined) {
          technologyList = [];
        }
        var arts = orderSetting.arts;
        var technologys = [];
        if (arts !== '') {
          if (technologyList.indexOf(arts) === -1) {
            technologys.push(arts);
          }
        }
        technologys.pushArray(technologyList);
        return technologys;
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch,
      SearchBtnView: SearchBtnView
    }
  });
</script>
<style>
  .order-property-setting {
    padding: 10px 20px;
    padding-bottom: 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .order-property-setting .property-setting-table-div {
    flex: 1;
    overflow: auto;
  }
</style>

</html>